<template>
  <div class="bottom_box">
    <div class="content">
      <div style="flex: 1; ">
        <dataFour
          icon="/img/myimg/bottom/shexiangtou.png"
          title="摄像头"
          :value="sxtList.length"
          unit="个"
          @click="itemClick('sxt')"
        ></dataFour>
      </div>
      <div style="flex: 1">
        <dataFour
          icon="/img/myimg/bottom/xunluodian.png"
          title="巡逻点"
          :value="xldList.length"
          unit="个"
          @click="itemClick('xld',xldList)"
        ></dataFour>
      </div>
      <div style="flex: 1">
        <dataFour
          icon="/img/myimg/bottom/sansechangsuo.png"
          title="三色场所"
          :value="csList.length"
          unit="个"
          @click="itemClick('sscs',csList)"
        ></dataFour>
      </div>
      <div style="flex: 1">
        <dataFour
          icon="/img/myimg/bottom/wzcbd.png"
          title="物资储备点"
          :value="wzcbdList.length"
          unit="个"
          @click="itemClick('wzcbd',wzcbdList)"
        ></dataFour>
      </div>
      <div style="flex: 1">
        <dataFour
          icon="/img/myimg/bottom/wzcbd.png"
          title="自建房"
          :value="wjfwxctjList.length"
          unit="个"
          @click="itemClick('gwjz',wjfwxctjList)"
        ></dataFour>
      </div>
    </div>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import { ref, reactive, onMounted } from "vue"
import dataFour from "../mConponents/dataFour.vue"
const emit = defineEmits(["itemClick"])
const itemClick = (e, data) => {
  emit("itemClick", { type: e, data })
}
onMounted(() => {
  getSxtList()
  // getXldList()
  getCsList()
  getWzcbdList()
  getWjfwxctj()
})
const sxtList = ref([])
const getSxtList = async () => {
  const res = await $api.get("api/index/get_jiankong_list")
  if (res.code === 1) {
    sxtList.value = res.data
  }
}
const wjfwxctjList = ref([])
const getWjfwxctj = async () => {
  const res = await $api.get("api/wjfwtj/wjcommunity")
  if (res.code === 1) {
    wjfwxctjList.value = [res.data]
  }
}
const xldList = ref([])
// const getXldList = async () => {
//   const res = await $api.get("api/v1/getXld")
//   if (res.code === 1) {
//     xldList.value = res.data
//   }
// }

const csList = ref([])
const getCsList = async () => {
  const res = await $api.get("/api/V1/getAqyj")
  if (res.code === 1) {
    xldList.value = res.data
    const list = []
      res.data.forEach((e) => {
        console.log(e.fxdj !== "4")
        if (e.fxdj !== "4") {
          list.push(e)
        }
      })
      csList.value = list
    }
}

const wzcbdList = ref([])
const getWzcbdList = async () => {
  const res = await $api.get("api/V1/getWzcb")
  if (res.code === 1) {
    wzcbdList.value = res.data
  }
}
</script>
<style scoped lang="less">
.bottom_box {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 130px;
  display: flex;
  justify-content: center;
}
.content {
  position: relative;
  background-image: url("/img/myimg/bottom/bottombg.png");
  background-size: 700px 130px;
  width: 700px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 30px 50px;
}
</style>
